<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
	<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" href="css/style.css"></head>
<body>
	<div class="h5-left">
		<div class="h5-play-wrap">
		</div>
		<fieldset class="h5-fieldset-wrap">
			<legend>登录</legend>
			<div class="h5-form-item">
				<label>设备ip</label>
				<input type="text" id="h5_ip" value="116.228.72.230">
			</div>
			<div class="h5-form-item fn-padl10">
				<label>端口</label>
				<input type="text" id="h5_port" value="37118">
			</div>
			<div class="h5-form-item">
				<label>用户名</label>
				<input type="text" id="h5_user" value="admin">
			</div>
			<div class="h5-form-item fn-padl10">
				<label>密码</label>
				<input type="text" id="h5_password" value="pass1111">
			</div>
			<div class="h5-form-item" style="margin-left: 228px;">
				<label>窗口分割</label>
				<select class="h5-select" sel-for="onChangeWdnNum">
					<option value="1" selected="">1x1</option>
					<option value="2">2x2</option>
					<option value="3">3x3</option>
					<option value="4">4x4</option>
				</select>
			</div>
			<div class="h5-form-item fn-clear" style="height: 30px;">
				<input type="button" value="登录" class="h5-button" btn-for="onLogin">
				<input type="button" value="注销" class="h5-button fn-marl10" btn-for="onLogout">
				<label class="fn-padl10">登录状态：</label>
				<span style="color: red;" id="h5_loginState">未登录</span>
			</div>
		</fieldset>
		<fieldset class="h5-fieldset-wrap">
			<legend>预览</legend>
			<div class="h5-form-item">
				<label>通道列表</label>
			</div>
			<ul class="h5-ul" id="h5_channel_list">
			</ul>
			<div class="h5-form-item fn-padl10">
				<label>码流类型</label>
				<select id="h5_stream" sel-for="onChangeStream"></select>
			</div>
			<div class="h5-form-item fn-mart10">
				<label>音量</label>
				<input type="range" id="h5_volume" min="0" max="1" step="0.1" value="0.5">
				<span id="h5_volume_value"></span>
				<span>（范围：0~1）</span>
			</div>
			<div class="h5-form-item fn-clear" style="display: none;">
				<input type="button" class="h5-button"  value="开始预览" btn-for="onPreview">
				<input type="button" class="h5-button fn-marl10"  value="停止预览" btn-for="onStopPreview">
			</div>
			<div class="h5-form-item fn-clear">
				<input type="button" class="h5-button" value="打开声音" btn-for="onTurnOnSound">
				<input type="button" class="h5-button fn-marl10" value="关闭声音" btn-for="onTurnSoundOff">
				<input type="button" class="h5-button fn-marl10" value="开始对讲" btn-for="onStartTalk">
				<input type="button" class="h5-button fn-marl10" value="停止对讲" btn-for="onStopTalk">
			</div>
			<div class="h5-form-item fn-clear">
				<input type="button" class="h5-button" value="抓图" btn-for="onSnap">
				<input type="button" class="h5-button fn-marl10" value="开始录像" btn-for="onStartRecord">
				<input type="button" class="h5-button fn-marl10" value="停止录像" btn-for="onStopRecord">
				<input type="button" class="h5-button fn-marl10" value="全屏" btn-for="onSetFull">
			</div>
			<div class="h5-form-item fn-clear">
				<input type="button" class="h5-button" style="width: 100px;" value="开启电子放大" btn-for="onStartEnlarge">
				<input type="button" class="h5-button fn-marl10" style="width: 100px;" value="关闭电子放大" btn-for="onStopEnlarge">
			</div>
			<div class="h5-form-item fn-clear">
				<input type="button" class="h5-button" style="width: 100px;" value="开启区域放大" btn-for="onStartGridEnlarge">
				<input type="button" class="h5-button fn-marl10" style="width: 100px;" value="关闭区域放大" btn-for="onCloseGridEnlarge">
			</div>
		</fieldset>
	</div>
	<div class="h5-middle">
		<fieldset class="h5-fieldset-wrap">
			<legend>云台控制</legend>
			<div class="h5-step-wrap">
				<span>步长(1-8):</span>
				<select id="h5_ptz_step" style="width: 130px;">
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5" selected="">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
				</select>
			</div>
			<div class="h5-ptz-wrap" title="云台按钮操作界面">
				<input type="button" class="h5-button" value="左上" onmousedown="onHandlePTZ('LeftUp', false)" onmouseup="onHandlePTZ('LeftUp', true)">
				<input type="button" class="h5-button" value="上" onmousedown="onHandlePTZ('Up', false)" onmouseup="onHandlePTZ('Up', true)">
				<input type="button" class="h5-button" value="右上" onmousedown="onHandlePTZ('RightUp', false)" onmouseup="onHandlePTZ('RightUp', true)">
				<input type="button" class="h5-button" value="左" onmousedown="onHandlePTZ('Left', false)" onmouseup="onHandlePTZ('Left', true)">
				<input type="button" class="h5-button" value="自动" onmousedown="onHandlePTZ('Auto', false)" onmouseup="onHandlePTZ('Auto', true)">
				<input type="button" class="h5-button" value="右" onmousedown="onHandlePTZ('Right', false)" onmouseup="onHandlePTZ('Right', true)">
				<input type="button" class="h5-button" value="左下" onmousedown="onHandlePTZ('LeftDown', false)" onmouseup="onHandlePTZ('LeftDown', true)">
				<input type="button" class="h5-button" value="下"  onmousedown="onHandlePTZ('Down', false)" onmouseup="onHandlePTZ('Down', true)">
				<input type="button" class="h5-button" value="右下" onmousedown="onHandlePTZ('RightDown', false)" onmouseup="onHandlePTZ('RightDown', true)">
			</div>
			<div class="h5-zoomfocus-wrap" title="变倍聚焦操作界面">
				<input type="button" class="h5-button" value="变倍-" onmousedown="onHandlePTZ('ZoomWide', false)" onmouseup="onHandlePTZ('ZoomWide', true)">
				<input type="button" class="h5-button" value="变倍+" onmousedown="onHandlePTZ('ZoomTele', false)" onmouseup="onHandlePTZ('ZoomTele', true)">
				<input type="button" class="h5-button" value="聚焦-" onmousedown="onHandlePTZ('FocusFar', false)" onmouseup="onHandlePTZ('FocusFar', true)">
				<input type="button" class="h5-button" value="聚焦+" onmousedown="onHandlePTZ('FocusNear', false)" onmouseup="onHandlePTZ('FocusNear', true)">
				<input type="button" class="h5-button" value="光圈-" onmousedown="onHandlePTZ('IrisSmall', false)" onmouseup="onHandlePTZ('IrisSmall', true)">
				<input type="button" class="h5-button" value="光圈+" onmousedown="onHandlePTZ('IrisLarge', false)" onmouseup="onHandlePTZ('IrisLarge', true)">
			</div>
			<div class="h5-preset-wrap" title="预置点操作界面">
				<div class="h5-item-form" style="margin-bottom: 10px;">
					<label>预置点：</label>
					<input type="text" id="h5_preset">
				</div>
				<input type="button" class="h5-button" value="查看"  onclick="onHandlePTZ('GotoPreset', false)">
				<input type="button" class="h5-button" value="增加"  onclick="onHandlePTZ('SetPreset', false)">
				<input type="button" class="h5-button" value="删除"  onclick="onHandlePTZ('ClearPreset', false)" >
			</div>
		</fieldset>
		<fieldset class="h5-fieldset-wrap" style="width: 600px;">
			<legend>录像回放</legend>
			<div class="h5-form-item">
				<label>开始时间</label>
				<input type="datetime-local" step="1" style="width: 170px;" id="h5_startTime">
			</div>
			<div class="h5-form-item" style="margin-left: 20px;">
				<label>结束时间</label>
				<input type="datetime-local" step="1" style="width: 170px;" id="h5_endTime">
			</div>
			<div class="h5-form-item">
				<label>通道列表</label>
				<select class="h5-select" id="h5_playback_channel"></select>
				<input type="button" class="h5-button fn-marl10" value="搜索" btn-for="onSearchRecord">
			</div>
			<table class="h5-table" id="h5_table">
				<thead>
					<tr>
						<td style="width: 50px;"><input type="checkbox" btn-for="onCheckAll" id="h5_checkAll"></td>
						<td style="width: 50px;">索引</td>
						<td style="width: 260px;">时间</td>
						<td style="width: 85px;">文件大小(KB)</td>
						<td style="width: 165px;">时间戳</td>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
			<div class="h5-form-item fn-mart10" >
				<input type="button" btn-for="onDownload" class="h5-button" value="下载">
				<span style="width: 40px">下载进度：<span id="h5_down_process" style="width: 50px"></span></span>
				<input type="button" btn-for="stopDownLoad" class="h5-button" value="取消下载">
				<a id="h5_first" class="h5-link" style="margin-left: 128px;"  href="javascript:;">首页</a>
				<a id="h5_pre" class="h5-link" href="javascript:;">上页</a>
				<span>
					<span id="h5_curPage">2</span>/<span id="h5_totalPage">5</span>
				</span>
				<a id="h5_next" class="h5-link" href="javascript:;">下页</a>
				<a id="h5_last" class="h5-link" href="javascript:;">末页</a>
				<input type="text" style="width: 30px;" id="h5_goNumber">
				<input type="button" value="GO!" id="h5_goPage" style="width: 40px">
			</div>
			<div class="h5-form-item  fn-mart10">
				<input type="button" value="开始回放(双击列表行)" disabled class="h5-button" style="width: 145px;" btn-for="onPausePlayback">
				<input type="button" value="暂停" class="h5-button" btn-for="onPausePlayback">
				<input type="button" value="继续" class="h5-button" btn-for="onContinuePlayback">
				<input type="button" value="结束回放" class="h5-button" btn-for="onClosePlayback">
			</div>
			<div class="h5-form-item  fn-mart10" style="display: none;">
				<span>当前播放秒数</span>
				<span id="h5_curTime">--</span>
				<span>/</span>
				<span id="h5_totalTime">--</span>
				<input type="text" id="h5_goTime" style="width: 50px;">
				<input type="button" class="h5-button" btn-for="onGoTime" value="GO!">
			</div>
			<div class="h5-form-item fn-mart10">
				<label>裁剪起始时间</label>
				<input type="datetime-local" step="1" style="width: 200px;" id="h5_cutStartTime">
				<span> - </span>
				<input type="datetime-local" step="1" style="width: 200px;" id="h5_cutEndTime">
			</div>
			<div class="h5-form-item fn-mart10">
				<input type="button" class="h5-button" style="width:200px" btn-for="onStartCut" value="开始裁剪(先勾选一个录像)"/>
				<span>裁剪进度：<span id="h5_cut_process"></span></span>
			</div>
			<div class="h5-form-item fn-mart10">
				<input type="button" btn-for="stopDownLoad" class="h5-button" value="取消裁剪">
			</div>
		</fieldset>
		
	</div>
<script src="module/PlayerControl.js"></script><script src="index.js"></script></body>
</html>